<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./项目模板/lib/message.js">
    <link rel="stylesheet" href="./项目模板/lib/echarts.min.js">
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>



<body>
    <div></div>
    <script>
        // 1. 初始化echarts
        let myChart = echarts.init(document.querySelector('div'))
        // 2. 图表的配置项(图表做出来是什么样，完全取决于这里的配置)
        let option = {
            // color: 'red',
            color: ['red', 'green', 'blue', 'pink'],
            // 图例
            legend: {
                // 默认加入这个配置，就有图例了。（需要系列数据有name）
                top: '20%'
            },
            // 鼠标移入的提示
            tooltip: {
                trigger: 'axis' // 鼠标放到轴线范围内，即可提示
            },
            // 网格配置（指的是图表区域的大小）
            grid: {
                top: '30%',
                left: 50 // 直接写数字，表示像素
            },
            title: {
                text: '一季度销售额统计',
                x: 'center',
                y: 'top'
            },
            // X轴线配置
            xAxis: {
                type: 'category',
                data: ['星期一', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: {
                    color: 'red'
                }
            },
            // Y轴配置
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false // 不显示Y轴分割线
                }
            },
            // 系列数据（图表的类型、细节配置、图表的数据....）
            series: [
                // 数组中的每个小对象，对应着一个图表
                {
                    name: '1月销售额',
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line' // 图表类型（line:折线图； bar:柱状图； pie:饼图）
                },
                {
                    name: '2月降雨量',
                    data: [250, 130, 124, 118, 235, 247, 160],
                    type: 'bar'
                },
                {
                    name: '3月亏损',
                    data: [120, 340, 84, 228, 155, 127, 210],
                    type: 'line'
                }
            ]
        }
        // 3. 创建图表
        myChart.setOption(option)
    </script>
</body>

</html>